<!--
 * @Descripttion: 
 * @version: 
 * @Author: xcb
 * @Date: 2021-04-02 10:24:14
 * @LastEditors: OBKoro1
 * @LastEditTime: 2023-03-27 10:24:00
-->
<template>
  <el-tabs>
    <el-tab-pane label="方案计算">
      <el-form :inline="true" :model="formData" class="demo-form-inline">
        <el-form-item label="时间">
          <el-date-picker v-model="formData.selectDate" type="date" :clearable="false" placeholder="Pick a day"
            :disabled-date="disabledDate" />
        </el-form-item>
        <el-form-item label="站点">
          <el-select v-model="formData.stcd">
            <el-option label="朱沱" value="60104800" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleInquire(formData.selectDate)">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="calculateButton(formData.selectDate)">计算</el-button>
        </el-form-item>
      </el-form>

      <div class="forecast-box">
        <div v-for="(value, key) in forecastData" :key="key" class="echarts-box" :id="key"></div>
      </div>
    </el-tab-pane>
    <el-tab-pane label="成果对比">
      <el-form :inline="true" :model="formDataAchievement" class="demo-form-inline">
        <el-form-item label="时间">
          <el-date-picker v-model="formDataAchievement.selectDate" value-format="YYYY-MM-DD" type="daterange"
            size="default" :clearable="false" :editable="false" show-time />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="comparisonOfQueryResults(formDataAchievement.selectDate)">查询</el-button>
        </el-form-item>
      </el-form>
      <div id="echarts" style="width: 80vw; height: 80vh;"></div>
    </el-tab-pane>
  </el-tabs>
</template>

<script lang="ts">
import { ElMessage, ElMessageBox } from "element-plus";
import {
  defineComponent,
  ref,
  provide,
  inject,
  watch,
  reactive,
  createVNode,
  toRefs,
  onMounted,
} from "vue";
import * as echarts from "echarts";

import moment, { Moment } from "moment";

import { getForecastSW, getComputeSW, getFetchSW } from "@/request/api";

export default defineComponent({
  setup() {
    const state = reactive({
      formData: {
        selectDate: Date.now(),
        stcd: "60104800",
      },
      forecastData: {},
      formDataAchievement: {
        selectDate: [
          moment().subtract(15, "days").format("YYYY-MM-DD"),
          moment().add(3, "d").format("YYYY-MM-DD"),
        ],
      },
      chartsCompareData: {}
    });

    onMounted(() => {
      getForecastData();
    });

    const disabledDate = (time: Date) => {
      return time.getTime() > Date.now();
    };

    const calculationOfResults = async (time = state.formDataAchievement.selectDate) => {
      var myChart;
      const resData: any = await getFetchSW({
        startDate: time[0],
        endDate: time[1]
      });
      type EChartsOption = echarts.EChartsOption;
      var chartDom = document.getElementById('echarts');
      if (myChart != null && myChart != "" && myChart != undefined) {
        myChart.dispose();//销毁
      }
      myChart = echarts.init(chartDom);
      var option: EChartsOption;
      const arr = []
      
      for (const key in resData.data) {
        arr.push({
          name: key,
          data: resData.data[key]
            .map((item) => [item.resulttime, item.resultdata])
            .filter((item) => item[1]),
          type: "line",
          symbol: "none",
        })
      }

      option = {
        legend: {
          data: Object.keys(resData.data)
        },
        title: {
          // text: '成果对比',
          // left: "center",
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: "#fff",
        },
        grid: {
          top: 40,
          right: 40,
          bottom: 40,
          left: 40,
          containLabel: true,
        },
        xAxis: {
          type: "time",
          splitLine: { show: true },
          axisTick: {
            show: true,
            inside: true,
          },
          axisLabel: {
            formatter: (value) => {
              return moment(value).format("YY-MM-DD HH");
            },
          },
        },
        yAxis: [
          {
            name: "水位(m)",
            type: "value",
            nameGap: 8,
            splitLine: {
              show: true,
            },
            axisLine: {
              show: true,
            },
            axisTick: {
              show: true,
              inside: true,
            },
            scale: true,
          },
          {
            name: "流量(m³/s)",
            type: "value",
            nameGap: 8,
            splitLine: { show: true },
            axisLine: {
              show: true,
            },
            axisTick: {
              show: true,
              inside: true,
            },
            scale: true,
          },
        ],
        series: arr
      };
      option && myChart.setOption(option);
    };

    const getForecastData = async (time: Date = new Date()) => {
      const resData: any = await getForecastSW({
        time: moment(time).format('yyyy-MM-DD HH:mm:ss')
      });

      state.forecastData = resData.data;

      for (const key in state.forecastData) {
        let text = "";
        switch (key) {
          case "60104100":
            text = "李庄";
            break;
          case "60104800":
            text = "朱沱";
            break;
          case "60613950":
            text = "富顺";
            break;
        }
        const option = {
          title: {
            text,
            left: "center",
          },
          tooltip: {
            trigger: "axis",
            backgroundColor: "#fff",
          },
          grid: {
            top: 40,
            right: 40,
            bottom: 40,
            left: 40,
            containLabel: true,
          },
          xAxis: {
            type: "time",
            splitLine: { show: true },
            axisTick: {
              show: true,
              inside: true,
            },
            axisLabel: {
              formatter: (value) => {
                return moment(value).format("YY-MM-DD HH");
              },
            },
          },
          yAxis: [
            {
              name: "水位(m)",
              type: "value",
              nameGap: "8",
              splitLine: {
                show: true,
              },
              axisLine: {
                show: true,
              },
              axisTick: {
                show: true,
                inside: true,
              },
              scale: true,
            },
            {
              name: "流量(m³/s)",
              type: "value",
              nameGap: "8",
              splitLine: { show: true },
              axisLine: {
                show: true,
              },
              axisTick: {
                show: true,
                inside: true,
              },
              scale: true,
            },
          ],
          series: [
            {
              name: "水位",
              data: state.forecastData[key]
                .map((item) => [item.tm, item.z])
                .filter((item) => item[1]),
              type: "line",
              symbol: "none",
              itemStyle: {
                color: "#8b4513",
              },
            },
            {
              name: "流量",
              data: state.forecastData[key]
                .map((item) => [item.tm, item.q])
                .filter((item) => item[1]),
              yAxisIndex: 1,
              type: "line",
              symbol: "none",
              itemStyle: {
                color: "#87cefa",
              },
            },
          ],
        };
        setTimeout(() => {
          const myCharts = echarts.init(document.getElementById(key));
          myCharts.setOption(option);
          myCharts.resize();
        }, 200)
      }
    };
    const calculation = async (time: Date) => {
      const resData: any = await getComputeSW({
        time: moment(time).format('yyyy-MM-DD HH:mm:ss')
      });
    };
    return {
      ...toRefs(state),
      getForecastData,
      calculation,
      calculationOfResults,
      disabledDate,
    };
  },
  methods: {
    handleInquire(time) {
      this.getForecastData(time)
    },
    calculateButton(time) {
      this.calculation(time)
    },
    comparisonOfQueryResults(time) {
      this.calculationOfResults(time)
    }
  }
});
</script>

<style scoped lang="less">
.forecast-box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  height: 780px;

  .echarts-box {
    width: 45%;
    height: 45%;
  }
}
</style>
